<template>
  <div>
      <s-table :search-params="searchParams" :COLUMNS="columns" :async-fc="page" ref="table">
          <template #tableHeader>
              <t-button @click="insert">新增信息</t-button>
          </template>
      </s-table>
      <t-dialog v-model:visible="modalOpen" @confirm="onModalSubmit" width="80%" placement="center">
          <t-form ref="submitFormRef" :rules="FORM_RULES" :data="submitForm">
            <t-row style="width: 100%" :gutter="[10,24]">
                <t-col :span="3">
                    <t-form-item :label="t('pages.motion.name')" name="name">
                        <t-input v-model="submitForm.name" :placeholder="t('pages.motion.namePlaceholder')"/>
                    </t-form-item>
                </t-col>
                <t-col :span="3">
                    <t-form-item :label="t('pages.motion.type')" name="type" >
                  <t-select v-model="submitForm.type" :options="typeOption" :placeholder="t('pages.motion.typePlaceholder')"/>
                    </t-form-item>
                </t-col>
                <t-col :span="3">
                    <t-form-item :label="t('pages.motion.applicableAge')" name="applicableAge">
                    <s-upload style="width: 200px;" v-model:value="submitForm.applicableAge" type="image" value-type="data" :limit="1" :tip="t('pages.motion.applicableAgePlaceholder')" />
              </t-form-item>
                </t-col>
                <t-col :span="3">
                    <t-form-item :label="t('pages.motion.beneficialPosition')" name="beneficialPosition">
                  <t-input v-model="submitForm.beneficialPosition" :placeholder="t('pages.motion.beneficialPositionPlaceholder')"/>
              </t-form-item>
                </t-col>
            <t-col :span="12">
              <t-form-item :label="t('pages.motion.introduction')" name="introduction">
                <s-editor v-model="submitForm.introduction" :placeholder="t('pages.motion.introductionPlaceholder')"/>
              </t-form-item>
            </t-col>
            <t-col :span="4">
              <t-form-item :label="t('pages.motion.status')" name="status">
                  <t-select v-model="submitForm.status" :options="statusOption" :placeholder="t('pages.motion.statusPlaceholder')"/>
              </t-form-item>
            </t-col>
            <t-col :span="4">
                <t-form-item :label="t('pages.motion.remarks')" name="remarks">
                  <t-input v-model="submitForm.remarks" :placeholder="t('pages.motion.remarksPlaceholder')"/>
              </t-form-item>
            </t-col>
        </t-row>
          </t-form>
      </t-dialog>
  </div>
</template>
<script setup lang="ts">
/*****                                          引用部分开始                                          *****/
import { ref } from "vue";
import { t } from "@/locales";
import STable from '@/components/s-table/index.vue';
import SEditor from '@/components/s-editor/index.vue';
import SUpload from '@/components/s-upload/index.vue';
import { TableInstanceFunctions } from "@/components/s-table/type";
import { searchParams, COLUMNS, FORM_RULES,typeOption,statusOption } from "../motion/props/index";
import { page, updateApi, insertApi, deleteById } from "@/api/motion";
import { FormInstanceFunctions, Link, Space, MessagePlugin, DialogPlugin, Popconfirm } from "tdesign-vue-next";
/*****                                          引用部分结束                                          *****/


/*****                                          属性定义部分开始                                          *****/
const submitForm = ref({
  id:null,
  name:'',
  type:'',
  applicableAge:'',
  beneficialPosition:'',
  introduction:'',
  status:'0',
  pushTime:'',
  remarks:'',
  //添加所用到的字段
});
const modalOpen = ref(false);
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<TableInstanceFunctions>(null);
/*****                                          属性定义部分结束                                          *****/


const columns = COLUMNS.concat([{
  align: 'left',
  fixed: 'right',
  colKey: 'op',
  title: t('components.commonTable.operation'),
  cell: (h, slot:{row:any}) => h(Space, {}, [
    (slot.row.status == 0 || slot.row.status == 1) && h(Popconfirm, {
        content:slot.row.status == 0 ? t('pages.motion.publishPlaceholder') : t('pages.motion.redcindPlaceholder'),
        onConfirm: async () => {
            const values = {id:slot.row.id,status:slot.row.status == 0 ? 1 : 2};
            if(slot.row.status == 0) {
            }
              await updateApi(values);
              MessagePlugin.success(`${slot.row.status == 0 ? t('pages.motion.publish') : t('pages.motion.rescind')}成功！`);
              table.value.onSearch();
          },
    },h(Link,
        {theme: slot.row.status == 0 ? 'success' : 'warning'},
            slot.row.status == 0 ? t('pages.motion.publish') : t('pages.motion.rescind'))
    ),
      h(Link, {
          theme: 'primary',
          onClick: () => {
              submitForm.value = slot.row;
              modalOpen.value = true;
          }
      }, '修改'),
      h(Link, {
          theme: 'danger',
          onClick: () => {
              const confirmDialog = DialogPlugin.confirm({
                  header: `提示`,
                  body: `删除后，标记为${slot.row.id}的所有信息将被清空，且无法恢复`,
                  confirmBtn: {
                      content: '提交',
                      theme: 'primary',
                      loading: false,
                  },
                  theme: 'warning',
                  onConfirm: async () => {
                      confirmDialog.update({ confirmBtn: { content: '提交中', loading: true } });
                      await deleteById(slot.row.id);
                      MessagePlugin.success('删除成功！');
                      table.value.onSearch();
                      confirmDialog.update({ confirmBtn: { content: '提交', loading: false } });
                      confirmDialog.hide();
                  },
              })
          }
      }, '删除'),
  ])
}]);


/*****                                          页面方法开始                                          *****/
const insert = () => {
  modalOpen.value = true;
  submitForm.value = {
  //配置默认值，但是也要把用到字段写出来
  id:null,
  name:'',
  type:'',
  applicableAge:'',
  beneficialPosition:'',
  introduction:'',
  status:'0',
  pushTime:'',
  remarks:'',
  };
  // 重置表单实例
  if (submitFormRef.value) {
     submitFormRef.value.reset();
}
}

/**
* 提交表单
*/
const onModalSubmit = async () => {
  const valid = await submitFormRef.value.validate();
  if (valid === true) {
      if (submitForm.value.id) {
          await updateApi(submitForm.value);
      } else {
          await insertApi(submitForm.value);
      }
      MessagePlugin.success('操作成功！');
      modalOpen.value = false;
      table.value.onSearch();
  }
}
/*****                                          页面方法结束                                          *****/
</script>